<template>
    <div class="chart-content">

        <v-chart :options="options"
                 style="width: 100%;
                 height: 400px;
                 display: inline-block"/>
    </div>
</template>

<script>
    import ECharts from 'vue-echarts'

    export default {
        name: "bar-chart",
        props: {
            options: {
                type: Object
            },
        },
        components: {
            'v-chart': ECharts
        },
        watch: {
            options() {
                this.options.title.textStyle = {
                    ...this.options.title.textStyle,
                    color: 'rgba(255, 255, 255, 0.7)'
                }
                this.options.legend.textStyle =  {
                    color:'#fffff'
                }
            }
        }
    }
</script>

<style scoped lang="scss">

    .echarts {
        width: 50%;
        height: 80%;
        background: rgba(0,51,110,0.9);
        color: #fff;
    }
</style>